//
// Base
// --------------------------------------------------

*,
*::before,
*::after {
  // UGH
  box-sizing: border-box;
}

// Reasonable estimate for the size of the scrollbar
$scrollbar-width: 30px;

// Font size for small devices
$font-size: 16;

// Font size for big devices
$font-size-secondary: 18;

// Font families
$font-headings: 'Lato', 'Helvetica', 'Arial', sans-serif;
$font-body: 'Fira Sans', 'Arial', sans-serif;
$font-mono: 'Consolas', monospace;
$font-print-primary: 'Georgia', 'Times New Roman', 'Times', serif;
$font-print-secondary: 'Georgia', 'Times New Roman', 'Times', serif;

// Transition duration
$transition-duration: 150ms;

// Custom sizes for media queries
$small: 480px;
$medium: 768px;
$large: 960px;
$extra-large: 1100px;

// Custom media queries
$sm: '(min-width: #{$small})';
$md: '(min-width: #{$medium})';
$lg: '(min-width: #{$large})';
$xl: '(min-width: #{$extra-large})';

//
// Color Palette

$background-color: #fff;

// Accent color for differentiating special elements or layout "pop"
$accent-text: #fcfcfe;
$accent-headings: $accent-text;
$accent-background: #3e4053;
$accent-link: #becacd;
$accent-link-visited: $accent-link;

// Basic colors, the usual colors where others aren't appropriate
$base-text: #000;
$base-headings: $base-text;
$base-background: $background-color;
$base-link: lighten($accent-background, 20%);
$base-link-visited: $base-link;

// Other colors

// How much to darken text colors from background colors
$text-color-darken-factor: 60%;

$success-color: #dff2bf;
$success-text-color: darken($success-color, $text-color-darken-factor);
$error-color: #ffcbcb;
$error-text-color: darken($error-color, $text-color-darken-factor);
$warning-color: #feefb3;
$warning-text-color: darken($warning-color, $text-color-darken-factor);
$danger-color: $error-color;
$danger-text-color: darken($danger-color, $text-color-darken-factor);
$info-color: #bde5f8;
$info-text-color: darken($info-color, $text-color-darken-factor);

@mixin use-accent {
  background-color: $accent-background;
  color: $accent-text;

  a {
    color: $accent-link;

    &:visited {
      color: $accent-link-visited;
      text-decoration-style: dashed;
    }
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    color: $accent-headings;
  }
}

//
// Layout

// Max width of content column
$content-max-width: 1000px;

// Min padding to edges of screen that should be maintained
$min-edge-padding: 10px;
